<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WebSocket 发送普通文本示例</title>
  <style>
    .block {
      flex: 1;
      margin-bottom: 40px;
    }

    #main {
      margin: auto;
      float: left;
    }
  </style>
</head>

<body>
  <h3>WebSocket 发送普通文本示例</h3>
  <div style="display: flex;">
    <div class="block">
      <p>即将发送给服务器的数据：<button onclick="send()">发送</button></p>
      <textarea id="sendMessage" rows="5" cols="15"></textarea>
    </div>
    <div class="block">
      <p>接收服务器推送过来的数据：</p>
      <textarea id="receivedMessage" rows="5" cols="15"></textarea>
    </div>
  </div>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 100%;height:400px;"></div>
  <!-- 引入 ECharts 文件 -->
  <script src="./js/echarts.js"></script>
  <script>
    const sendMsgContainer = document.querySelector("#sendMessage");
    const receivedMsgContainer = document.querySelector("#receivedMessage");
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    const socket = new WebSocket("ws://localhost:8001");
    // 指定图表的配置项和数据
    var option = {
        title: {
          text: "人体温度统计图",
          left: 'center',
          top: 'auto',
          textStyle: {
            color: "red"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: ["早上", "中午", "晚上"],
          top: '30px',
          textStyle: {
            fontSize: 20
          }
        },
        xAxis: [{
          type: "category",
          name: "人员编号",
          data: [
            "1号",
            "2号",
            "3号",
            "4号",
            "5号",
            "6号",
            "7号",
            "8号",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            fontSize: 20 //字体大小
          }
        }],
        yAxis: [{
          type: "value",
          name: "温度",
          min: 0,
          max: 50,
          interval: 5,
          axisLabel: {
            formatter: "{value} °C",
            fontSize: 20 //字体大小
          }
        }],
        series: [{
          name: "早上",
          barWidth: 40,
          type: "bar",
          color: "#92d050",
          // 体温数据在这里改
          data: [20, 21, 22, 23, 20, 20, 18, 26]
        },
        {
          name: "中午",
          type: "bar",
          color: "#ed7d31",
          // 体温数据在这里改
          data:[22, 26, 35, 27, 26.3, 34, 35, 28]
        },
        {
          name: "晚上",
          type: "bar",
          color: "#9cc3e5",
          // 体温数据在这里改
          data: [21.5, 27, 23, 35, 21, 37, 22, 28]
        }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    // socket.onopen = function (e) {
    //   console.log("连接服务器成功");
    //   socket.send("game1");
    // }
    socket.onclose = function (e) {
      console.log("服务器关闭");
    }
    socket.onerror = function () {
      console.log("连接出错");
    }

    // 监听连接成功事件
    socket.addEventListener("open", function (event) {
      console.log("连接成功，可以开始通讯");
    });

    // 监听服务端推送过来的消息
    socket.addEventListener("message", function (event) {
      // console.log("Message from server ", JSON.parse(event.data));
      let result = JSON.parse(event.data);
      receivedMsgContainer.value = result.a;
      option.series[0].data = result.zao;
      option.series[1].data = result.zhong;
      option.series[2].data = result.wan;
      myChart.setOption(option);
    });
    // 发送按钮点击事件
    function send() {
      const message = sendMsgContainer.value;
      if (socket.readyState !== WebSocket.OPEN) {
        console.log("连接未建立，还不能发送消息");
        return;
      }
      if (message) socket.send(message);
    }
    // 自适应屏幕宽度
    window.onresize = function () {
      myChart.resize();
    };
  </script>
</body>

</html>